<template>
	<view
		:class="['iconfont', 'rate-static', clr, zClass]"
		:style="{'color':clr?'':clr}"
	>
		&#xe6ea;&#xe6ea;&#xe6ea;&#xe6ea;&#xe6ea;
		<view class="cover" :style="{'width': percent}">&#xe6eb;&#xe6eb;&#xe6eb;&#xe6eb;&#xe6eb;</view>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'value':{type:Number, default:0},
			'color':{type:String, default:'primary'}
		},
		computed:{
			clr(){return this.$zp.mapColorStr[this.color] || ''},
			percent(){return Math.floor(this.value/5*100) + '%'}
		}
	}
</script>

<style lang="scss">
	.rate-static{
		display: inline-flex;
		font-size: $font-size-base*1.6;
		position: relative;
		.cover{
			position: absolute;
			left: 0;
			top: 0;
			overflow: hidden;
			width: 0%;
		}
	}
</style>
